<template>
  <div class="login pages-box">
    <div class="header flex-center">
      <i
        class="iconfont icon-chahao1"
        @click="$router.replace({ name: 'Home' })"
      ></i
      >登录
    </div>
    <div class="section">
      <div class="top-bg"></div>
      <div class="container">
        <div class="tab-box flex-align">
          <div
            class="tab"
            :class="{ tabActive: tabActive == 1 }"
            @click="changeTab(1)"
          >
            <span>手机验证码登录</span>
          </div>
          <div
            class="tab"
            :class="{ tabActive: tabActive == 2 }"
            @click="changeTab(2)"
          >
            <span>账号登录</span>
          </div>
        </div>
        <div v-if="tabActive == 1">
          <van-form @submit="onSubmitRegist">
            <van-field
              v-model="params.phone"
              label-width="50px"
              size="large"
              name="phone"
              label="账号"
              :rules="[
                { required: true, message: '请输入手机号码' },
                { pattern, message: '手机号码格式不正确' },
              ]"
            />
            <van-field
              v-model="params.smsCode"
              label-width="50px"
              center
              type="number"
              :maxlength="6"
              name="smsCode"
              label="验证码"
              :rules="[{ required: true, message: '请输入验证码' }]"
            >
              <template #button>
                <van-button
                  size="small"
                  round
                  native-type="button"
                  color="linear-gradient(to right, #F95276, #FD7795)"
                  :disabled="status == 1"
                  @click="getCode()"
                  >{{
                    status == 0 ? "获取验证码" : downCounts + "s后重新获取"
                  }}</van-button
                >
              </template>
            </van-field>
            <p class="tip">未注册的手机号码验证后自动创建账户</p>
            <div style="margin: 66px 0 26px">
              <van-button
                round
                block
                color="linear-gradient(to right, #F95276, #FD7795)"
                native-type="submit"
                :disabled="!repeatBool"
                >立即登录</van-button
              >
            </div>
          </van-form>
        </div>
        <div v-if="tabActive == 2">
          <van-form @submit="onSubmitLogin">
            <van-field
              v-model="params.account"
              label-width="50px"
              size="large"
              name="account"
              label="账号"
              :rules="[{ required: true, message: '请输入账号' }]"
            />
            <van-field
              v-model="params.pwd"
              label-width="50px"
              size="large"
              type="password"
              name="pwd"
              label="密码"
              :rules="[{ required: true, message: '请输入密码' }]"
            />
            <div style="margin: 96px 0 26px">
              <van-button
                round
                block
                color="linear-gradient(to right, #F95276, #FD7795)"
                native-type="submit"
                :disabled="!repeatBool"
                >立即登录</van-button
              >
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSMS, login } from "@/api/login";
export default {
  data() {
    return {
      tabActive: 1,
      params: {
        account: "",
        pwd: "",
        verify: "1234",
        phone: "",
        smsCode: "",
      },
      pattern: /^1[13456789]\d{9}$/,
      downCounts: 60,
      status: 0,
      timer: null,
      dirUrlName: "",
      repeatBool: true,
    };
  },
  created() {
    if (this.$route.query.dirUrlName) {
      this.dirUrlName = this.$route.query.dirUrlName;
    }
  },
  methods: {
    changeTab(type) {
      this.tabActive = type;
    },
    // 获取验证码
    getCode() {
      if (!this.params.phone) {
        return this.$toast("请输入手机号");
      } else if (!this.pattern.test(this.params.phone)) {
        return this.$toast("手机号码格式不正确");
      }
      getSMS({
        phone: this.params.phone,
      })
        .then((res) => {
          if (res.code == 0) {
            this.status = 1;
            this.downCounts = 60;
            clearInterval(this.timer);
            this.timer = setInterval(() => {
              this.downCounts--;
              if (this.downCounts <= 0) {
                clearInterval(this.timer);
                this.status = 0;
              }
            }, 1000);
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("验证码获取失败，请稍后重试！");
        });
    },
    onSubmitLogin(values) {
      this.repeatBool = false;
      this.login(values);
    },
    onSubmitRegist(values) {
      this.repeatBool = false;
      this.login(values);
    },
    login(dataParams) {
      console.log(dataParams, "===========");
      // return;
      let formData = JSON.parse(JSON.stringify(dataParams));
      if (this.tabActive == 1) {
        formData.loginType = 1;
        // formData = {
        //   phone: this.params.phone,
        //   smsCode: this.params.smsCode,
        // };
      } else {
        formData.loginType = 0;
        formData.verify = this.params.verify;
        // formData = {
        //   phone: this.params.phone,
        //   pwd: this.params.pwd,
        // };
      }
      login(formData)
        .then((res) => {
          if (res.code == 0) {
            localStorage.setItem("jyToken", res.data.token);
            res.data.userInfo.fsBrandVO = res.data.fsBrandVO;
            localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
            this.$toast.success("登陆成功");
            // this.getUserInfo();
            setTimeout(() => {
              const surl = localStorage.getItem('url1')
              if(surl){
                this.$router.push(surl)
                localStorage.removeItem('url1')
                return
              }
              if (this.dirUrlName) {
                let query = {};
                if (this.$route.query.id) {
                  query = { id: this.$route.query.id };
                }
                if (this.dirUrlName == "ActivityDetail") {
                  query = {
                    id: this.$route.query.id,
                    type: this.$route.query.type,
                  };
                }
                this.$router.replace({
                  name: this.dirUrlName,
                  query,
                });
              } else {
                this.$router.replace({ name: "Home" });
              }
              this.repeatBool = true;
            }, 1500);
          } else {
            this.repeatBool = true;
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.repeatBool = true;
          this.$toast("登录失败，请稍后重试！");
        });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/css/login.less");
</style>
